handsontable

Today I would like to talk about a very powerful jquery plugin---handsontable, which implements the Excel effect in HTML, can be implemented in almost Excel, and it can be implemented in the page.such as: sorting, grouping, data binding, drag copying and so on.Quick Start1: Download must packdownload it in a ZIP file.2: Introduction of the Base file3 Then add a DIV layer to render the Excel edit table4 initializationEffecthandsontable APIGive some bas

RendererThe data presented does not come from the data source, but the DOM and other information is first passed to renderer and then presented.Five kinds of display function textrenderer:defaultnumericrendererautocompleterenderercheckboxrendererpasswordrendererThe reason why I can't add listener to cell: 1, a cell will call renderer multiple times, may cause it to have multiple identical event listeners, 2, cell CRUD scrolling, may cause cell and listener binding error. If you must do this, you

Want to do Excel-like operations on the page, found that handsontable meets the requirements.And then found this articlehttp://blog.csdn.net/wynan830/article/details/9054195The author extends the handsontable implementation of multiple headers.The Removerowplugin property is also added to perform the delete operation by displaying a delete button in front of each line.I do not need to delete the page, so se

Rendering a custom element in a cell: You cannot use HTML elementsvar data = [{title: ' 　　　　 ' #x2605; #x2605; #x2605; #x2605; #x2606 ' comments: "I would rate it★★★★☆", Cove R: "Http://ecx.images-amazon.com/images/I/51bRhyVTVGL._SL50_.jpg"}, {title: "Only allow input to contain the specified label function strip_tags (input, allowed) {var tags =/This method I have not used var escaped = Handsontable.helper.stringify (value); escaped = Strip_tags (escaped, ' Prevent abnormal conditions e.preven

: Minimum line space, insufficient add blank line14.observechanges:true/false//When value is true, enable observechanges plug-in15.colwidths:[column width 1, column width 2, ...] /Column Width valueFor example:[JavaScript]View Plaincopy print? var hot = new Handsontable (container, { Data:data, Observechanges: True, Colheaders: True, Rowheaders: True, Colwidths:70, ContextMenu: false, Manualrowresize: True, Manualcolumnresize: Tru

/false//When value is true, enable observechanges plug-in15.colwidths:[column width 1, column width 2, ...] /Column Width valueFor example:[JavaScript]View PlainCopyprint? var hot = new Handsontable (container, { Data:data, Observechanges: True, Colheaders: True, Rowheaders: True, Colwidths:70, ContextMenu: false, Manualrowresize: True, Manualcolumnresize: True, Minsparerows:30, Cells: function (row, col, prop) {//cell render

indexes of the new rowAmount: Number of new rowsAftergetcellmeta ( row: Number , col: Number cellProperties: Object ): Gets the configuration information of the cell after it is calledBeforegetcellmeta ( row: Number , col: Number , cellProperties: Object ): Called before getting cell propertiesAftersetcellmeta (,, row: Number col: Number key: String , value: * ): Called when the cell style is changed Aftergetcolheader ( col: Number , TH: DOM Node ): Called after getting colu

1. Add Hook method for Handsontable Addhook (key,callback): Key is the hook method name[JavaScript]View Plaincopyprint? "FONT-SIZE:18PX;" > Example: Hot.addhook (' beforeinit ', mycallback); Addhookonce (key,callback): Add a one-time only method, automatically delete after use[JavaScript]View Plaincopyprint? "FONT-SIZE:18PX;" > Example: Hot.addhookonce (' beforeinit ', mycallback); 2. Add a row or column to delete a row o

1. Cell arrayCell: [{row:0, col:0, readonly:true}]2. Cells functionCells:function (Row, col, prop) {var cellproperties = {};if (row = = = 0 Col = = = 0) {cellproperties.readonly = true; }return cellproperties;}3, concatenation settings: The first column can be edited; the first row and the other are read-only.Readonly:true,columns: [ {readonly:false}, { }, {}],cells:function (row, col, prop) { var Cellproperties = {} if (row = = = 0 Col = = = 0) { cellproperties.readonly = true; } re

Echarts initializes the Times with this error. Require.config is not a function Programme one: The initialization of one side is not dependent on require. 1. Remove vartestdrowecharts=function(data) { require.config ({paths: {echarts: ' Build/dist ' } }); Require ([ ' Echarts ' , ' echarts/chart/line ', // load bar module with histogram, load on demand

But handsontable can't use jquery to take objects.var $$ = function (ID) {return document.getElementById (ID); }, Container = $$ (' example1 '), Exampleconsole = $$ (' Example1console '), AutoSave = $$ (' AutoSave '), load = $$ (' Load '), Save = $$ (' save '), autosavenotification, hot;hot = new handsontable (container, {startrows:8, startcols:6, Rowheade Rs:true, Colheaders:true, afterchange:function (ch

Sorting is the basic function of the table, and handsontable will support it.Sometimes the requirements can be complex, require custom sorting, or call other sorting methods; custom sorting is complicated, not done; today's call to the sorting method in R.There are two events beforecolumnsort and aftercolumnsort; Useful is the former, index,order parameter, but not supported: return false; Disables the default sorting method.In the source code, there

(Ht.getvalue ());//Now you know what's going on with GetValue! This getvalue displays the contents of the selected cell when a cell is selected in the preset. //All right, let's see what the Presets are. Alert (ht.getselected ());//returns coordinates, such as 2,2,2,2How do I know the number of rows and columns of a table?Alert (' Table rows: ' +ht.countrows ()); Alert (' table column number: ' +ht.countcols ());How do I get the column index based on the column name, and the column name accordi

Website: http://handsontable.com/The current version is 0.12.2, and there is a bug that needs to be repaired manually.A bug that does not enter Chinese by default when you set up automatic completion of a column.Tested on Firefox,chrome and IE11Remedy:Change "KeyDown" in line 1.3936 to "KeyUp"Eventmanager.addeventlistener (document, ' KeyUp ', function (EV) {instance.runhooks (' afterdocumentkeydown ', Ev); });2. Comment out the 1199,1202 line, as follows/** * Listen to document body Keyboard in

1.clear (): Erase data2.createCol (index,amount,createautomatically): Adding columns index : Column index, amount: Total number of columns added,createautomatically: As a number Removecol (index,amount): Delete Column CreateRow (Index): Add

In Excel, you can perform almost all operations on webpages, such as dragging and copying, Ctrl + C, and Ctrl + V. In addition, it supports the following browsers: IE7 +, FF, Chrome, Safari, and Opera. How to use:First, introduce the JS and CSS files related to the jQuery framework and Handsontable plug-ins on the page. The following two files are necessary, and others are optional, if you need a function (see the demo), add it. Copy codeThe Code is a

In Excel, you can perform almost all operations on webpages, such as dragging and copying, Ctrl + C, and Ctrl + V. In addition, it supports the following browsers: IE7 +, FF, Chrome, Safari, and Opera. How to use:First, introduce the JS and CSS files related to the jQuery framework and Handsontable plug-ins on the page. The following two files are necessary, and others are optional, if you need a function (see the demo), add it. Copy codeThe Code is

How to Implement excel-like table control and excel table control on the web Execl is very powerful. Many built-in functions or formulas can greatly improve data processing capabilities. Are there any similar controls on the web? After some searches, it is found that handsontable has basic excel functions to support formulas and can edit data in real time. In addition, it supports drag copy, Ctrl + C, Ctrl + V, and so on. In terms of browser support,

The things you can do in Excel, you can almost do it in a Web page, such as drag copying, CTRL + C, CTRL + V, and so on. In addition to browser support, it supports the following browsers ie7+, FF, Chrome, Safari, Opera. How to use:First of all, introduce the JQuery framework and the related JS and CSS files of the handsontable plug-ins in the page, and the following two are necessary, and others are optional, if a feature is needed (see demo).

40 jQuery plug-ins worth your attention and 40 jQuery plug-ins worth your attention The jQuery developer community should be one of the most diligent and active communities in website development. They continuously provide us with free and practical plug-ins. I will share with you 40 useful plug-ins recently collected. I. Rolling plug-in JQuery Waypoints Waypoints is a jQuery plug-in used to capture various rolling events, such as page-less content browsing, or fixing an element to prevent scro